<!--
 * @Description: 多部分模态框组件
-->
<template>
  <el-dialog v-model="visible" :title="getTitle()" width="80%" @close="handleClose">
    <div class="modal-content">
      <div v-if="type === 'text'" class="text-content">
        {{ memo }}
      </div>
      
      <div v-else-if="type === 'html'" class="html-content" v-html="memo"></div>
      
      <div v-else class="default-content">
        {{ memo }}
      </div>
    </div>
    
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElDialog, ElButton } from 'element-plus'

interface Props {
  type: string
  memo: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
  onClose: []
}>()

const visible = computed({
  get: () => !!props.type,
  set: (value) => {
    if (!value) {
      emit('onClose')
    }
  }
})

const getTitle = () => {
  switch (props.type) {
    case 'text':
      return '提示信息'
    case 'html':
      return '详细信息'
    default:
      return '信息'
  }
}

const handleClose = () => {
  emit('onClose')
}
</script>

<style scoped lang="less">
.modal-content {
  .text-content,
  .html-content,
  .default-content {
    line-height: 1.6;
    white-space: pre-wrap;
  }
  
  .html-content {
    :deep(p) {
      margin-bottom: 12px;
    }
    
    :deep(ul), :deep(ol) {
      padding-left: 20px;
      margin-bottom: 12px;
    }
  }
}
</style>
